"""
@author: gaoyx
@date: 2021-12-29 16:39:15
"""
<!-- 选择年份 -->
<template>
  <div class="">
    <van-field
      readonly
      clickable
      :border="false"
      :value="`${defaultYear}年`"
      placeholder="选择年份"
      right-icon="play"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" round position="bottom">
      <van-picker
        show-toolbar
        value-key="text"
        :columns="yearOptions"
        :default-index="defaultIndex"
        @cancel="showPicker = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
const yearArr = () => {
  let arr = []
  let date = new Date().getFullYear()
  for (let i = 2014; i <= date + 1; i++) {
    let year = i + '年'
    arr.push({
      text: year,
      value: i
    })
  }
  return arr
}
export default {
  name: '',
  mixins: [],
  components: {},
  props: {
    v: {
      type: [String, Number, Object],
      default: undefined
    }
  },
  data() {
    return {
      yearOptions: yearArr(),
      showPicker: false,
      defaultYear: new Date().getFullYear()
    }
  },
  computed: {
    defaultIndex() {
      return this.yearOptions.findIndex(
        (item) => item.value === this.defaultYear
      )
    }
  },
  watch: {
    defaultYear(val) {
      this.changeEvt(val)
    }
  },
  model: {
    prop: 'v',
    event: 'change'
  },
  methods: {
    changeEvt(value) {
      this.$emit('change', value)
    },
    onConfirm(e) {
      this.showPicker = false
      this.defaultYear = e.value
    }
  }
}
</script>

<style lang='scss' scoped>
::v-deep .van-cell {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 79px;
  height: 30px;
  line-height: 30px;
  padding: 0 8px;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  box-shadow: none;
  z-index: 1;
}
::v-deep .van-field__control {
  color: #333;
}
::v-deep .van-field__right-icon {
  padding: 0 6px 0 0;
}
::v-deep .van-icon-play {
  transform: rotate(90deg);
  font-size: 14px;
  color: #777;
}
</style>